<script lang="tsx">
import { computed, defineComponent, inject, ref, type Ref } from "vue"
import { collapseItemProps } from "./props"

export default defineComponent({
	name: "ChenCollapseItem",
	props: collapseItemProps,
	setup(props, { slots }) {
		const handleItemClick = inject(Symbol.for("itemClick")) as (name: string) => void
		const activeNames = inject(Symbol.for("activeNames")) as Ref<string[]>
		// refs
		const contentRef = ref<HTMLDivElement | null>(null)
		const opened = computed(() => {
			return activeNames.value.includes(props.name!)
		})
		// 由于fit-content不支持，所以使用srollHeight
		const maxHeight = computed(() => {
			return opened.value ? `${contentRef.value?.scrollHeight}px` : "0px"
		})
		return () => (
			<div class="collapse-item-container">
				<div
					class={`title ${opened.value ? "title-bottom-remove" : null} ${
						props.disabled ? "disabled" : ""
					}`}
					onClick={() => {
						if (!props.disabled) {
							handleItemClick(props.name!)
						}
					}}
				>
					<div class="title-left">{props.title}</div>
					<div class={`title-origin ${opened.value ? "title-right" : ""}`}>
						<Chen-Icon icon="arrow-right"></Chen-Icon>
					</div>
				</div>
				<div
					class="content"
					ref={contentRef}
					style={{
						maxHeight: maxHeight.value,
					}}
				>
					<div class="inner">{slots.default ? slots.default() : null}</div>
				</div>
			</div>
		)
	},
})
</script>

<style lang="less" scoped>
.title {
	border-top: 1px solid var(--chen-border-color-light);
	border-bottom: 1px solid var(--chen-border-color-light);
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	&.title-bottom-remove {
		border-bottom: none;
	}
	&.disabled {
		color:var(--chen-disabled-text-color);
		cursor: not-allowed;
		user-select: none;
	}
	.title-origin {
		transform: rotate(0deg);
		transition: transform 0.3s;
	}
	.title-right {
		transform: rotate(90deg);
		transition: transform 0.3s;
	}
}
.content {
	line-height: 1.2;
	overflow: hidden;
	transition: all 0.3s;
	.inner {
		padding: 10px 20px;
	}
}
</style>
